<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery超酷3d旋转木马特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel='stylesheet prefetch' href='css/3d-carousel.css'>
	<style class="cp-pen-styles">
/* hardware accelatator class */	
	.trans3d
	{
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform-style: preserve-3d;
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform-style:preserve-3d;
		-ms-transform: translate3d(0, 0, 0);
		transform-style:preserve-3d;
		transform: translate3d(0, 0, 0);

		/*-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility:hidden;
		backface-visibility:hidden;*/
	}
	
	#contentContainer
	{
		position:absolute;
		margin-left:-500px;
		margin-top:-500px;
		left:50%;
		top:50%;
		width:1000px;
		height:1000px;
	}
	
	#carouselContainer
	{
		position:absolute;
		margin-left:-500px;
		margin-top:-500px;
		left:50%;
		top:50%;
		width:1000px;
		height:1000px;
	}
	
	.carouselItem
	{
		width:320px;
		height:130px;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-160px;
		margin-top:-90px;
		visibility:hidden;
	}
	
	.carouselItemInner
	{
		width:320px;
		height:130px;
		position:absolute;
		background-color:rgba(255, 255, 255, .75);
		border:10px solid rgba(255, 255, 255, .5);
		color:aqua;
		font-size:72px;
		left:50%;
		top:50%;
		margin-left:-160px;
		margin-top:-90px;
		text-align:center;
		padding-top:50px;
	}
</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header>
			<h1>3D Carousel Using TweenMax.js & jQuery</h1>
			<div id="fps">Framerate: 0/60 FPS</div>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502231409.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div id="contentContainer" class="trans3d"> 
			<section id="carouselContainer" class="trans3d">
				<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
				<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
				<figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure>
				<figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure>
				<figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure>
				<figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure>
				<figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure>
				<figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure>
				<figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure>
				<figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure>
				<figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure>
				<figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure>	
			</section>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html">
			  <img src="img/1.jpg" width="300" alt="Owl Carousel 2-支持触摸屏的响应式jQuery旋转木马插"/>
			  <h3>Owl Carousel 2-支持触摸屏的响应式jQuery旋转木马插</h3>
			</a>
			<a href="http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502061338.html">
			  <img src="img/2.jpg" width="300" alt="CSS3 3D TRANSFORMS系列教程-3D旋转木马"/>
			  <h3>CSS3 3D TRANSFORMS系列教程-3D旋转木马</h3>
			</a>
		</div>
	</div>
	
	<script src='js/3d-carousel.min.js'></script>
	<script>
// set and cache variables
		var w, container, carousel, item, radius, itemLength, rY, ticker, fps; 
		var mouseX = 0;
		var mouseY = 0;
		var mouseZ = 0;
		var addX = 0;
		
		
		// fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
		// no need to create my own :)
		var fps_counter = {
			
			tick: function () 
			{
				// this has to clone the array every tick so that
				// separate instances won't share state 
				this.times = this.times.concat(+new Date());
				var seconds, times = this.times;
        
				if (times.length > this.span + 1) 
				{
					times.shift(); // ditch the oldest time
					seconds = (times[times.length - 1] - times[0]) / 1000;
					return Math.round(this.span / seconds);
				} 
				else return null;
			},
 
			times: [],
			span: 20
		};
		var counter = Object.create(fps_counter);
		
		
		
		$(document).ready( init )
		
		function init()
		{
			w = $(window);
			container = $( '#contentContainer' );
			carousel = $( '#carouselContainer' );
			item = $( '.carouselItem' );
			itemLength = $( '.carouselItem' ).length;
			fps = $('#fps');
			rY = 360 / itemLength;
			radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
			
			// set container 3d props
			TweenMax.set(container, {perspective:600})
			TweenMax.set(carousel, {z:-(radius)})
			
			// create carousel item props
			
			for ( var i = 0; i < itemLength; i++ )
			{
				var $item = item.eq(i);
				var $block = $item.find('.carouselItemInner');
				
        //thanks @chrisgannon!        
        TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
				
				animateIn( $item, $block )						
			}
			
			// set mouse x and y props and looper ticker
			window.addEventListener( "mousemove", onMouseMove, false );
			ticker = setInterval( looper, 1000/60 );			
		}
		
		function animateIn( $item, $block )
		{
			var $nrX = 360 * getRandomInt(2);
			var $nrY = 360 * getRandomInt(2);
				
			var $nx = -(2000) + getRandomInt( 4000 )
			var $ny = -(2000) + getRandomInt( 4000 )
			var $nz = -4
			000 +  getRandomInt( 4000 )
				
			var $s = 1.5 + (getRandomInt( 10 ) * .1)
			var $d = 1 - (getRandomInt( 8 ) * .1)
			
			TweenMax.set( $item, { autoAlpha:1, delay:$d } )	
			TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} )
			TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:0,  ease:Expo.easeInOut} )
			TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )
		}
		
		function onMouseMove(event)
		{
			mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
			mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;
			mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);
		}
		
		// loops and sets the carousel 3d properties
		function looper()
		{
			addX += mouseX
			TweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )
			TweenMax.set( carousel, {z:mouseZ } )
			fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' )	
		}
		
		function getRandomInt( $n )
		{
			return Math.floor((Math.random()*$n)+1);	
		}
</script>
</body>
</html>